<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="small" type="primary" @click="addDialogVisible = true"
          >添加城市</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
        border
        stripe
      >
        <el-table-column prop="name" label="名字" min-width="80" />
        <el-table-column prop="areaCode" label="区号" min-width="80" />
        <el-table-column prop="isShow" label="是否展示" min-width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              @change="onchangeIsShow(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="lng" label="经度" min-width="80" />
        <el-table-column prop="lat" label="纬度" min-width="80" />
        <el-table-column prop="createTime" label="创建时间" min-width="80" />
        <el-table-column label="操作" min-width="50" fixed="right">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="warning"
              size="small"
              @click="onEdit(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 添加城市对话框 -->
    <el-dialog
      title="添加城市"
      @close="addRoleDialogClosed"
      :visible.sync="addDialogVisible"
      width="50%"
    >
      <el-form
        :model="addRuleForm"
        :rules="addRules"
        ref="addRuleFormRef"
        label-width="100px"
      >
        <el-form-item label="城市名称 :" prop="name">
          <el-input v-model="addRuleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="区号 :" prop="areaCode">
          <el-input v-model="addRuleForm.areaCode"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度 :" prop="lng">
              <el-input v-model="addRuleForm.lng"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度 :" prop="lat">
              <el-input v-model="addRuleForm.lat"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="城市名称 :" prop="addressName">
          <el-input
            v-model="addRuleForm.addressName"
            enter-button="查找位置"
            style="width: 100%"
            placeholder="请输入城市名称（地址中请包含城市名称，否则会影响搜索精度）"
          >
            <el-button slot="append" type="primary" @click="onSearch"
              >查找位置</el-button
            >
          </el-input>
        </el-form-item>
        <maps
          class="map-sty"
          v-if="mapKey"
          ref="mapChild"
          :mapKey="mapKey"
          :lat="Number(addRuleForm.lat || 34.34127)"
          :lng="Number(addRuleForm.lng || 108.93984)"
          :address="addRuleForm.addressName"
          @getCoordinates="getCoordinates"
        ></maps>
      </el-form>
      <!-- 地图 -->
      <!-- <t-map ref="tencentMap" @nowLocation="nowLocation"></t-map> -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改城市对话框 -->
    <el-dialog
      title="修改城市信息"
      @close="editRoleDialogClosed"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form
        :model="editRuleForm"
        :rules="addRules"
        ref="editRuleFormRef"
        label-width="100px"
      >
        <el-form-item label="城市名称 :" prop="name">
          <el-input v-model="editRuleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="区号 :" prop="areaCode">
          <el-input v-model="editRuleForm.areaCode"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度 :" prop="lng">
              <el-input v-model="editRuleForm.lng"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度 :" prop="lat">
              <el-input v-model="editRuleForm.lat"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="城市名称 :" prop="addressName">
          <el-input
            v-model="editRuleForm.addressName"
            enter-button="查找位置"
            style="width: 100%"
            placeholder="请输入城市名称（地址中请包含城市名称，否则会影响搜索精度）"
          >
            <el-button slot="append" type="primary" @click="eonSearch"
              >查找位置</el-button
            >
          </el-input>
        </el-form-item>
        <maps
          class="map-sty"
          v-if="mapKey"
          ref="mapChild"
          :mapKey="mapKey"
          :lat="Number(editRuleForm.lat || 34.34127)"
          :lng="Number(editRuleForm.lng || 108.93984)"
          :address="editRuleForm.addressName"
          @getCoordinates="egetCoordinates"
        ></maps>
      </el-form>
      <!-- 地图 -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
</script>
<script>
import {
  getCityList,
  createCityList,
  infoCityList,
  updateCityList,
  updateShowCityList,
} from "@/api/system";
import maps from "@/components/map/map.vue";
export default {
  components: { maps },
  name: "city",
  data() {
    return {
      mapKey: "DHXBZ-U3JH3-QKN3Q-YV6FR-AT75Q-GUBAQ", //地图key

      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 5,
        keywords: "",
        status: "",
        date: "",
      },
      editRuleForm: {
        areaCode: "",
        lat: "",
        lng: "",
        name: "",
      },
      addRuleForm: {
        areaCode: "",
        lat: "",
        lng: "",
        name: "",
      },
      listLoading: true,
      addDialogVisible: false,
      editDialogVisible: false,
      addRules: {
        name: [{ required: true, message: "请输入身份名称", trigger: "blur" }],
      },
    };
  },

  // activated() {
  //   this.init();
  // },
  created() {
    this.getList();

    
  },
  mounted() {
    var _this = this;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        //locationSuccess 获取成功的话
        function (position) {
          _this.addRuleForm.lng = position.coords.longitude;
          _this.addRuleForm.lat = position.coords.latitude;
          console.log(
            "经度 :",
            _this.addRuleForm.lng,
            "纬度 :",
            _this.addRuleForm.lat
          );
        },
        //locationError  获取失败的话
        function (error) {
          var errorType = [
            "您拒绝共享位置信息",
            "获取不到位置信息",
            "获取位置信息超时",
          ];
          console.log(errorType[error.code - 1]);
          // _this.addRuleForm.lng = 113.947449;
          // _this.addRuleForm.lat = 35.197939;
        }
      );
    }
  },
  methods: {
    // 地图信息获取
    getCoordinates(data) {
      // this.addRuleForm.mer_address = data.address;
      this.addRuleForm.lat = data.location.lat || 34.34127;
      this.addRuleForm.lng = data.location.lng || 108.93984;
      console.log(data);
    },
    //查找位置
    onSearch() {
      // console.log(this.$refs)
      this.$refs.mapChild.searchKeyword(this.addRuleForm.addressName);
    },

    // 地图信息获取
    egetCoordinates(data) {
      // this.editRuleForm.mer_address = data.address;
      this.editRuleForm.lat = data.location.lat || 34.34127;
      this.editRuleForm.lng = data.location.lng || 108.93984;
      console.log(data);
    },
    //查找位置
    eonSearch() {
      // console.log(this.$refs)
      this.$refs.mapChild.searchKeyword(this.editRuleForm.addressName);
    },

    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      getCityList(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;

          this.listLoading = false;
        })
        .catch((res) => {
          this.tableData.data = [];
          this.tableData.total = 0;
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList();
    },
    // 是否展示按钮
    onchangeIsShow(row) {
      console.log(row);
      updateShowCityList(row.id, row.isShow)
        .then(({ message }) => {
          this.$message.success(message);
        })
        .catch(({ message }) => {
          this.$message.error(message);
        });
    },
    // 添加按钮
    addDialogSubmit() {
      this.$refs.addRuleFormRef.validate((valid) => {
        if (!valid) return;
        createCityList(this.addRuleForm)
          .then(() => {
            this.getList();
            this.$message.success("添加城市成功！");
            this.addDialogVisible = false;
          })
          .catch(() => {
            console.log(this.addRuleForm, "12313213");
            this.$message.error("添加城市失败！");
            this.addDialogVisible = false;
          });
      });
    },
    addRoleDialogClosed() {
      this.$refs.addRuleFormRef.resetFields();
    },
    editRoleDialogClosed() {
      this.$refs.editRuleFormRef.resetFields();
    },
    // 编辑
    onEdit(id) {
      this.editDialogVisible = true;
      infoCityList(id)
        .then((res) => {
          console.log(res)
          this.editRuleForm = res.data;;

            // this.editRuleForm.isShow = res.data.isShow;
            // this.editRuleForm.lat = res.data.lat;
            // this.editRuleForm.lng = res.data.lng;
            // this.editRuleForm.name = res.data.name;
        })
        .catch((res) => {
          // console.log(res, "555555555555");
          this.$message.error("城市信息获取失败！");
        });
    },
    // 编辑按钮对话框确认点击事件
    editDialogSubmit() {
      updateCityList(this.editRuleForm.id, this.editRuleForm)
        .then((res) => {
          this.$message.success("修改城市信息成功！");
          console.log(res)
          this.getList();
          this.editDialogVisible = false;
        })
        .catch(() => {
          this.$message.error("修改城市信息失败！");
          this.editDialogVisible = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.el-switch {
  width: 40px;
}

.input-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  width: 100px;
  background-color: rgb(226, 19, 19);
}
.btn {
  width: 10rem;
  margin-left: 6.8rem;
}
.map {
  width: 500px;
  height: 500px;
  background-color: rgb(221, 18, 18);
  border: black 1px solid;
}
</style>